<template>
  <div class="wrap">
    <div class="app-info-wrapper">
      <h3>应用资料</h3>
      <el-form ref="form" :model="appInfo" label-width="120px">
        <el-form-item label="应用名称">
          <el-input v-model="appInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="appInfo.version"></el-input>
        </el-form-item>
        <el-form-item label="开发者名称">
          <el-input v-model="appInfo.developer"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="appInfo.keyword"></el-input>
        </el-form-item>
        <el-form-item label="官网">
          <el-input v-model="appInfo.website"></el-input>
        </el-form-item>
        <el-form-item label="一句话简介">
          <el-input v-model="appInfo.description"></el-input>
        </el-form-item>
        <el-form-item label="应用介绍">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="appInfo.overview"></el-input>
        </el-form-item>
        <el-form-item label="更新日志">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="appInfo.changeLog"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="button-group">
      <el-button type="danger" @click="back">返回</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import { fetchAppInfo, submitAppInfo } from '@/api/apps'

  export default {
    data(){
      return{
        appInfo: {
          name: '',
          version: '',
          developer: '',
          keyword: '',
          website: '',
          description: '',
          overview: '',
          changeLog: '',
        }
      }
    },
    methods:{
      back(){
        this.$confirm('返回上一步将不会保存在此页的更改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.go(-1)
        }).catch(() => {
          return
        });
      },
      next(){
        submitAppInfo(this.$route.query.id, this.appInfo).then(res => {
          this.$router.push({
            name: 's3',
            query: {
              id: this.$route.query.id
            }
          })
        })
      }
    },
    created(){
      fetchAppInfo(this.$route.query.id).then(res => {
        for(var key in this.appInfo){
          appInfo[key] = res.data[key]
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .wrap{
    .app-info-wrapper{
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 600px;
      padding: 20px 0;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      .el-form{
        min-width: 500px;
      }
    }
    .button-group{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>
